<template>
	<div class="home">
		<van-divider></van-divider>
		<van-row>
			<!-- 消息弹出界面 -->
			<van-col span="5">
				<van-icon name="volume-o" size="30" is-link @click="showMessage" />
			</van-col>
			<van-col span="7">
				<van-icon name="wap-home-o" size="30"  @click="onClickHome" />
			</van-col>
			<van-col span="7">
				<van-icon name="fire-o" size="30" @click="onClickHot" />
			</van-col>

			<van-col span="5">
				<van-icon name="search" size="30" is-link @click="showPopup" />
			</van-col>
		</van-row>
		<van-divider
		  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
		>
		</van-divider>

		<van-row>
			<van-col span="12">
			</van-col>
			<van-col span="6">
			</van-col>
			<van-col span="6">
			</van-col>
		</van-row>
		<!-- 4.功能模块 -->
		<van-row>
			<!-- 图文混排 -->
			<van-col span="24">
				<van-row>
					<van-col span="16">
						<van-col span="24">
							<h2>贡献榜上线了</h2>
						</van-col>
						<van-col span="22">
							<h4>快来贡献你的试题</h4>
						</van-col>
						<van-col span="24">
							<span>参与人数：xxx 人</span>
						</van-col>
					</van-col>
					<van-col span="8">
						<van-image class="gnimg" src="https://img.yzcdn.cn/vant/apple-1.jpg">
						</van-image>
					</van-col>
				</van-row>
			</van-col>
		</van-row>

		<van-row>
			<van-col span="2"></van-col>
			<van-col span="22">
				<van-row>
					<van-col span="16">
						<van-col span="20">
							<h2>新人福利，海量精品免费阅读</h2>
						</van-col>
					</van-col>
					<van-col span="8">
						<van-image class="gnimg" src="https://img.yzcdn.cn/vant/apple-1.jpg">
						</van-image>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<!-- 消息查看 -->
		<van-popup v-model:show="showmsg" close-icon-position="top-left" closeable close-icon="close" position="left"
			:style="{ height: '100%',width:'100%' }">

		</van-popup>
		<!-- 搜索 -->
		<van-popup v-model:show="show" position="bottom" :style="{ height: '80%',width:'100%' }">
			<van-row>
				<van-col span="1"></van-col>
				<van-col span="3" style="margin-top: 10px;">
					<van-icon size="32" class="toptb" name="notes-o" @click="tznotice" />
				</van-col>
				<van-col span="16">
					<van-search shape="round" v-model="seaMsg" to="/find" placeholder="请输入搜索关键词" />
				</van-col>
				<van-col span="3" style="margin-top: 10px;">
					<van-icon size="32" class="toptb" name="envelop-o" to="/mail" @click="tznotice()" />
				</van-col>
				<van-col span="1"></van-col>
			</van-row>
		</van-popup>

	</div>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		Toast
	} from 'vant';
	export default {
		setup() {
			//搜索
			const show = ref(false);
			// 查看消息
			const showmsg = ref(false);
			const showPopup = () => {
				show.value = true;
			};
			const showMessage = () => {
				showmsg.value = true;
			};
			return {
				show,
				showPopup,
				showmsg,
				showMessage,
			};
		},
		methods: {
			tznotice() {
				this.$router.push("/signin");
			},
			onClickHome() {
				this.$router.push({ path:'/'  })
			},
			onClickHot() {
				this.$router.push({ path:'/Hot'  })
			}
		}
	};
</script>
<style>

</style>
